<template>
  <div>
    <div class="process-group">
      <!--头部搜索工作栏-->
      <div class="header-search">
        <div class="header-left">
          <span class="fold-span" :style="{ borderColor: foldPanelShow ? '#2a67f4' : '#e3e5e8' }"
            :class="foldPanelShow ? 'show-panel' : 'hide-panel'" @click="foldTreeEvent()">
            <svg-icon :icon-class="foldPanelShow ? 'process-all' : 'process-all-hide'"
              class="svg-icon-size-one svg-icon-margin-one"></svg-icon>
          </span>
        </div>
        <div class="header-right">
          <el-button type="success" style="width: 132px; margin-right: 10px"
            @click="handleAdd"><svg-icon icon-class="process-create"
              class="svg-icon-size-one svg-icon-margin" />新建</el-button>
          <el-dropdown trigger="click">
            <el-button type="info" plain style="width: 132px; margin-right: 10px"><svg-icon
                icon-class="batch-operation" class="svg-icon-size-one svg-icon-margin" />批量操作<i
                class="el-icon-arrow-down el-icon--right"></i></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="batchDelete">批量删除</el-dropdown-item>
              <el-dropdown-item @click.native="batchRemove">批量移动</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-input placeholder="搜索流程名称" style="width: 240px" v-model="queryParams.name"
            @keyup.enter.native="getList" @blur="getList">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
      <!--内容工作栏-->
      <div class="main-content">
        <div class="left-tree" v-show="foldPanelShow">
          <span class="process-group-title">
            <span>流程分组</span>
            <!-- <svg-icon
              icon-class="batch-operation"
              class="svg-icon-size-two process-sort-icon"
            /> -->
          </span>
          <el-input placeholder="搜索分组" v-model="filterText">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-scrollbar style="min-height: 300px; max-height: 500px; margin-bottom: 100px">
            <el-tree v-loading="processGroupOperate.loading" class="filter-tree" :data="treeData"
              :props="defaultProps" :filter-node-method="filterNode" :highlight-current="true"
              :current-node-key="currentModelGroupId" :default-expanded-keys="expandedKeys"
              :expand-on-click-node="false" ref="tree" node-key="id" @node-click="nodeClicked"
              accordion>
              <span class="custom-tree-node" slot-scope="{ node, data }"
                @mouseover="mouseover(data)" @mouseout="mouseout(data)">
                <span :style="{
                  color: data.id == currentModelGroupId ? '#0047ea' : '',
                  width: '100px',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                }" :title="node.label">{{ node.label }}</span>
                <span class="mouseover-span">
                  <el-button v-show="data.nodeShow" type="text" size="mini"
                    @click="($event) => append($event, data)">
                    <i class="el-icon-plus"> </i>
                  </el-button>
                  <el-button v-show="data.deleteShow" type="text" size="mini"
                    @click="($event) => editGroup($event, data)">
                    <i class="el-icon-edit"> </i>
                  </el-button>
                  <el-button v-show="data.deleteShow" type="text" size="mini"
                    @click="($event) => remove($event, node, data)">
                    <i class="el-icon-delete"> </i>
                  </el-button>
                </span>
              </span>
            </el-tree>
          </el-scrollbar>

          <div class="create-root-name" @click="createRootGroup">
            <svg-icon icon-class="process-add-name" class="svg-icon-size-two" />
            <span>新建分组</span>
          </div>
        </div>
        <div class="right-table">
          <!-- 列表 -->
          <div>
            <el-table ref="table" v-loading="loading" :data="list"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="50"> </el-table-column>
              <el-table-column label="编号" align="center" prop="id" />
              <el-table-column align="left" prop="name" width="200" resizable show-overflow-tooltip>
                <template slot="header">
                  <el-tooltip class="item" effect="light" placement="top-start">
                    <template slot="content">
                      <p>
                        <svg-icon icon-class="process-parent"
                          class="svg-icon-size-one svg-icon-margin" />主流程
                      </p>
                      <p>
                        <svg-icon icon-class="process-child"
                          class="svg-icon-size-one svg-icon-margin" />子流程
                      </p>
                    </template>
                    <span><i class="el-icon-question"></i> 流程名称
                    </span></el-tooltip>
                </template>
                <template slot-scope="scope">
                  <svg-icon :icon-class="scope.row.processType == 1
                    ? 'process-parent'
                    : 'process-child'
                    " class="svg-icon-size-one svg-icon-margin" /><span>{{ scope.row.name || "-"
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="groupName" label="所属分组" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.groupName || "-" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="流程描述" align="center" prop="description" width="100">
                <template v-slot="scope">
                  {{ scope.row.description || "-" }}
                </template>
              </el-table-column>
              <el-table-column label="启用版本" align="center" prop="enableProcessVersion" resizable
                show-overflow-tooltip>
                <template v-slot="scope">
                  <span>{{ scope.row.enableProcessVersion || "-" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="版本名称" align="center" prop="enableProcessName" width="80">
                <template v-slot="scope">
                  <span>{{ scope.row.enableProcessName || "-" }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column
                label="操作用户"
                align="center"
                prop="updateUserName"
                width="80"
              >
              </el-table-column>
              <el-table-column
                label="创建时间"
                align="center"
                prop="createTime"
                width="180"
              >
                <template v-slot="scope">
                  <span>{{ parseTime(scope.row.updateTime) }}</span>
                </template>
              </el-table-column> -->
              <el-table-column label="操作" align="center" width="150">
                <template v-slot="scope">
                  <el-button type="text" icon="el-icon-view" @click="lookProcessDetail(scope.row)"
                    v-hasPermi="['bpm:model:update']" class="svg-icon-margin">查看</el-button>
                  <el-dropdown trigger="click">
                    <el-button type="text" v-hasPermi="['bpm:model:update']"><svg-icon
                        icon-class="more" class="svg-icon-size-three"
                        style="margin-left: 10px" /></el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="handleUpdate(scope.row)">
                        <span><svg-icon icon-class="file-edit"
                            class="svg-icon-size-one" />编辑</span></el-dropdown-item>
                      <el-dropdown-item @click.native="handleCopy(scope.row)">
                        <span><svg-icon icon-class="file-copy"
                            class="svg-icon-size-one" />复制</span></el-dropdown-item>
                      <el-dropdown-item @click.native="singleRemove(scope.row)">
                        <span><svg-icon icon-class="file-remove"
                            class="svg-icon-size-one" />移动至</span></el-dropdown-item>
                      <el-dropdown-item @click.native="singleDelete(scope.row)">
                        <span style="color: red"><svg-icon icon-class="file-delete"
                            class="svg-icon-size-one" />删除</span></el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- 分页组件 -->
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize" @pagination="getList"
        style="padding: 32px 16px !important" />
    </div>
    <!-- 流程表单配置详情 -->
    <el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
      <parser :key="new Date().getTime()" :form-conf="detailForm" />
    </el-dialog>

    <!-- 流程模型图的预览 -->
    <el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body>
      <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
    </el-dialog>

    <!-- 新建/编辑流程对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body center>
      <el-form ref="modelForm" :model="modelOperate.form" :rules="modelOperate.rules"
        label-width="110px">
        <el-form-item label="流程名称" prop="name">
          <el-input v-model="modelOperate.form.name" placeholder="请输入流程名称" clearable />
        </el-form-item>
        <el-form-item label="流程分组" prop="groupId" v-if="!modelOperate.form.id">
          <el-cascader v-model="modelOperate.form.groupId" placeholder="请选择流程分组" clearable
            style="width: 100%" :options="treeData" :props="defaultCascaderProps"></el-cascader>
        </el-form-item>
        <el-form-item prop="processType">
          <template slot="label">
            类型<el-tooltip class="item" effect="light" content="流程类型不支持修改，主流程可绑定表单，子流程不可绑定表单。"
              placement="top">
              <i style="padding-left: 5px" class="el-icon-question" />
            </el-tooltip>
          </template>
          <el-radio-group v-model="modelOperate.form.processType">
            <el-radio v-for="dict in modelProcessTypeDictDatas" :key="parseInt(dict.value)"
              :label="parseInt(dict.value)">
              {{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="流程描述" prop="description">
          <el-input type="textarea" v-model="modelOperate.form.description" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelModel" type="info" plain>取 消</el-button>
        <el-button type="primary" @click="submitFormModel">确 定</el-button>
      </div>
    </el-dialog>
    <!--批量删除对话框-->
    <el-dialog :visible.sync="operateBtn.deleteDialog" width="500px" append-to-body center>
      <template slot="title">
        <svg-icon icon-class="warning-icon" class="svg-icon-size-two" /><span
          class="batch-delete">批量删除</span></template>
      <div class="batch-delete-content">
        <span>
          是否要删除所选中的【{{ this.operateBtn.selected.length }}】条流程？
        </span>
        <span>该流程下所有版本将被清空且不可恢复！</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDelete" type="info" plain>取 消</el-button>
        <el-button type="primary" @click="submitDelete">确 定</el-button>
      </div>
    </el-dialog>
    <!--批量移动对话框-->
    <el-dialog title="移动至" :visible.sync="operateBtn.removeDialog" width="500px" append-to-body
      center>
      <div class="batch-remove-content">
        <span> 将选中的分组移动至： </span>
        <el-cascader v-model="operateBtn.groupId" placeholder="请选择流程分组" clearable
          style="width: 100%" :options="treeData" :props="defaultCascaderProps"></el-cascader>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelRemove" type="info" plain>取 消</el-button>
        <el-button type="primary" @click="submitRemove">确 定</el-button>
      </div>
    </el-dialog>
    <!--新建流程分组对话框-->
    <el-dialog :title="processGroupOperate.title" :visible.sync="processGroupOperate.showDialog"
      width="500px" center>
      <el-form ref="processGroup" :model="processGroupOperate.form"
        :rules="processGroupOperate.rules" label-width="110px">
        <el-form-item label="父分组：" v-show="processGroupOperate.form.isShow">
          <el-input v-model="processGroupOperate.form.parentName" disabled />
        </el-form-item>
        <el-form-item label="分组名称：" prop="name">
          <el-input v-model="processGroupOperate.form.name" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFromGroup" type="info" plain>取 消</el-button>
        <el-button type="primary" @click="submitFormProcessGroup">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 复制流程 -->
    <el-dialog title="复制流程" :visible.sync="copy.showDialog" width="500px" append-to-body center>
      <el-form ref="copyForm" :model="copy.form" label-width="110px" :rules="copy.rules">
        <el-form-item label="流程名称" prop="name">
          <el-input v-model="copy.form.name" placeholder="请输入流程名称" clearable />
        </el-form-item>
        <el-form-item label="流程分组" prop="groupId">
          <el-cascader v-model="copy.form.groupId" placeholder="请选择流程分组" clearable
            style="width: 100%" :options="treeData" :props="defaultCascaderProps"></el-cascader>
        </el-form-item>
        <el-form-item label="版本名称">
          <el-input v-model="copy.form.enableProcessName" disabled />
        </el-form-item>
        <el-form-item label="流程版本" prop="versionNo">
          <el-select v-model="copy.form.versionNo" placeholder="请选择流程版本" clearable
            style="width: 100%" @change="handleChange">
            <el-option v-for="dict in categoryDictDatas" :key="dict.modelId" :label="dict.versionNo"
              :value="dict.modelId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="流程描述" prop="description">
          <el-input type="textarea" v-model="copy.form.description" clearable />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="cancelCopy">取 消</el-button>
        <el-button type="primary" @click="submitCopy">确 定</el-button>
      </span>
    </el-dialog>

    <!-- ========== 流程任务分配规则 ========== -->
    <taskAssignRuleDialog ref="taskAssignRuleDialog" />
  </div>
</template>

<script>
import {
  getTreeList,
  save,
  saveModel,
  deleteGroup,
  getModelList,
  modelMove,
  queryVersionList,
  modelDelete,
  processCopy,
} from "@/api/bpm/processGroup";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
import Parser from "@/components/parser";
import { getBaseHeader } from "@/utils/request";
import { isNumberStr } from "@/utils";
import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "BpmManagerModel",
  components: {
    Parser,
    Treeselect,
    taskAssignRuleDialog,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        name: "",
        pageNo: 1,
        pageSize: 10,
      },

      // BPMN 数据
      showBpmnOpen: false,
      bpmnXML: null,
      bpmnControlForm: {
        prefix: "flowable",
      },

      // 流程表单详情
      detailOpen: false,
      detailForm: {
        fields: [],
      },

      // 流程表单
      title: "",
      open: false,
      form: {},
      // 表单校验
      rules: {
        key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
        name: [
          { required: true, message: "流程名称不能为空", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "名称长度在1到50个字符",
            trigger: "blur",
          },
        ],
        formType: [
          { required: true, message: "流程名称不能为空", trigger: "blur" },
        ],
        formId: [
          { required: true, message: "业务表单不能为空", trigger: "blur" },
        ],
        category: [
          { required: true, message: "流程分类不能为空", trigger: "blur" },
        ],
        processType: [
          { required: true, message: "流程名称不能为空", trigger: "blur" },
        ],
        formCustomCreatePath: [
          { required: true, message: "表单提交路由不能为空", trigger: "blur" },
        ],
        formCustomViewPath: [
          { required: true, message: "表单查看路由不能为空", trigger: "blur" },
        ],
      },

      // 流程导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: getBaseHeader(),
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/admin-api" + "/bpm/model/import",
        // 表单
        form: {},
        // 校验规则
        rules: {
          key: [
            { required: true, message: "流程标识不能为空", trigger: "blur" },
            {
              min: 1,
              max: 50,
              message: "名称长度在1到50个字符",
              trigger: "blur",
            },
          ],
          name: [
            { required: true, message: "流程名称不能为空", trigger: "blur" },
          ],
        },
      },

      // 复制流程
      copy: {
        selected: [],
        showDialog: false,
        form: {
          name: "",
          versionNo: "",
          groupId: "",
          description: "",
          enableProcessName: "",
        },
        rules: {
          name: [
            { required: true, message: "流程名称不能为空", trigger: "blur" },
            {
              min: 1,
              max: 50,
              message: "名称长度在1到50个字符",
              trigger: "blur",
            },
          ],
          groupId: [
            { required: true, message: "流程分组不能为空", trigger: "blur" },
          ],
          versionNo: [
            { required: true, message: "流程分类不能为空", trigger: "blur" },
          ],
        },
      },
      //批量删除弹出框
      operateBtn: {
        selected: [],
        deleteDialog: false,
        removeDialog: false,
        groupId: "",
      },
      //批量移动弹出框
      // 数据字典
      modelProcessTypeDictDatas: [
        { label: "主流程", value: 1 },
        { label: "子流程", value: 0 },
      ],
      categoryDictDatas: [],
      modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE),
      taskAssignRuleDictDatas: getDictDatas(
        DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE
      ),
      filterText: "",
      treeData: [
        {
          children: [],
          id: 0,
          level: 0,
          name: "所有分组",
          parentId: 0,
          sortNo: 0,
        },
      ],
      defaultCascaderProps: {
        label: "name",
        value: "id",
        checkStrictly: true,
        // emitPath: false,
        // multiple: false,
      },
      defaultProps: {
        children: "children",
        label: "name",
      },
      foldPanelShow: true,
      //新建流程分组弹出框
      processGroupOperate: {
        loading: false,
        showDialog: false,
        form: {}, //表单数据
        rules: {
          name: [
            { required: true, message: "分组名称不能为空", trigger: "blur" },
            {
              min: 1,
              max: 50,
              message: "名称长度在1到50个字符",
              trigger: "blur",
            },
          ],
        },
      },
      //新建流程模型弹出框
      modelOperate: {
        form: {
          processType: "",
          name: "",
          description: "", //流程描述
          groupId: "",
        }, //表单数据
        rules: {
          name: [
            { required: true, message: "流程名称不能为空", trigger: "blur" },
          ],
          groupId: [
            { required: true, message: "流程分组不能为空", trigger: "change" },
          ],
          processType: [
            {
              required: true,
              message: "流程类型不能为空",
              trigger: "blur",
            },
          ],
        },
      },
      //当前页面选中的流程分组
      currentModelGroupId: "",
      expandedKeys: [],
      isInitTree: true,
      parentList: [],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    //当前选中的流程分组
    currentModelGroupId(val) {
      this.getList();
    },
    $route(to, from) {
      if (from.path == "/bpm/process-instance/look") {
        this.getList();
      }
    }
  },
  created() {
    this.getList();
    //获取流程分组树形数据
    this.getTreeList();
    this.expandedKeys = [this.treeData[0].id];
  },
  mounted() { },
  methods: {
    getTreeList() {
      this.processGroupOperate.loading = true;
      getTreeList().then((res) => {
        this.treeData[0].children = res.data;
        console.log("!!!:", this.treeData);
        this.processGroupOperate.loading = false;
      });
      this.$nextTick(() => {
        if (this.isInitTree) {
          this.expandedKeys = [this.treeData[0].id];
          this.currentModelGroupId = this.treeData[0].id;
          this.parentList = [this.currentModelGroupId];
          this.$refs.tree.setCurrentKey(this.treeData[0].id);
          this.isInitTree = false;
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    /** 查询流程模型列表 */
    getList() {
      this.loading = true;
      this.queryParams.groupId = this.currentModelGroupId;
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.queryParams.groupId);
        this.expandedKeys = [this.queryParams.groupId];
      });
      getModelList(this.queryParams).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        key: undefined,
        name: undefined,
        description: undefined,
        category: undefined,
        formType: undefined,
        formId: undefined,
        formCustomCreatePath: undefined,
        formCustomViewPath: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      //this.reset();
      this.title = "新建流程";
      this.open = true;
      this.modelOperate.form.groupId = this.parentList;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.title = "修改流程";
      this.open = true;
      this.modelOperate.form.name = row.name;
      this.modelOperate.form.id = row.id;
      this.modelOperate.form.description = row.description;
      //this.modelOperate.form.groupId = row.groupId;
      this.modelOperate.form.processType = row.processType;
    },
    /**流程分组添加提交操作 */
    submitFormProcessGroup() {
      this.$refs["processGroup"].validate((valid) => {
        if (!valid) {
          return;
        }

        let params = {
          sortNo: 0,
        };
        if (this.processGroupOperate.form.id) {
          params.id = this.processGroupOperate.form.id;
        }
        params.name = this.processGroupOperate.form.name;
        params.parentId = this.processGroupOperate.form.parentId;
        save(params).then((res) => {
          this.$modal.msgSuccess("创建成功");
          this.cancelFromGroup();
        });
      });
    },
    cancelFromGroup() {
      this.$refs["processGroup"].resetFields();
      this.processGroupOperate.form = {};
      this.processGroupOperate.showDialog = false;
      this.getTreeList();
    },
    /**新建流程事件 */
    submitFormModel() {
      this.$refs["modelForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        let params = {};
        params = this.modelOperate.form;
        if (this.modelOperate.form.id) {
          params.id = this.modelOperate.form.id;
        } else {
          params.groupId =
            this.modelOperate.form.groupId[
            this.modelOperate.form.groupId.length - 1
            ];
        }

        params.processType = this.modelOperate.form.processType;

        saveModel(params).then((res) => {
          this.currentModelGroupId = params.groupId;
          this.parentList = this.modelOperate.form.groupId;
          this.cancelModel();
        });
      });
    },
    /** 关闭新建弹窗 */
    cancelModel() {
      this.$refs["modelForm"].resetFields();
      this.open = false;
      this.modelOperate.form = {
        processType: "",
        name: "",
        groupId: "",
        description: "",
      };
      this.modelOperate.form.groupId = this.parentList;
      this.getList();
    },
    handleChange(val) {
      this.copy.form.souceModelId = val;
    },
    /* 复制流程 */
    handleCopy(row) {
      this.copy.showDialog = true;
      this.copy.selected = row;
      this.copy.form.name = row.name + "-副本";
      this.copy.form.groupId = isNumberStr(row.groupId)
        ? +row.groupId
        : row.groupId; // [row.groupId];
      this.copy.form.enableProcessName = row.enableProcessName;
      //根据id,获取该流程下的所有版本
      queryVersionList(row.id).then((res) => {
        this.categoryDictDatas = res.data;
      });
    },
    submitCopy() {
      this.$refs["copyForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        let params = {};
        params.name = this.copy.form.name;
        params.sourceModelId = this.copy.form.souceModelId;
        params.groupId =
          this.copy.form.groupId[this.copy.form.groupId.length - 1];
        params.description = this.copy.form.description;
        this.currentModelGroupId = params.groupId;
        processCopy(params).then(({ data }) => {
          if (data) {
            this.$modal.msgSuccess("流程复制成功");
            this.cancelCopy();
          }
        });
      });
    },
    //取消流程复制
    cancelCopy() {
      this.$refs["copyForm"].resetFields();
      this.copy.form = {
        name: "",
        versionNo: "",
        groupId: "",
        description: "",
        enableProcessName: "",
      };
      this.copy.showDialog = false;
      this.getList();
    },
    handleSelectionChange(val) {
      this.operateBtn.selected = val;
    },
    //批量删除
    batchDelete() {
      if (this.operateBtn.selected.length < 1) {
        this.$modal.msgWarning("请选择要批量删除的流程！");
        return;
      }
      this.operateBtn.deleteDialog = true;
    },
    //批量移动
    batchRemove() {
      if (this.operateBtn.selected.length < 1) {
        this.$modal.msgWarning("请选择要批量移动的流程！");
        return;
      }
      this.operateBtn.removeDialog = true;
    },
    singleRemove(row) {
      this.operateBtn.removeDialog = true;
      this.operateBtn.selected = [row];
    },
    singleDelete(row) {
      this.operateBtn.deleteDialog = true;
      this.operateBtn.selected = [row];
    },
    //批量移动确定操作
    submitRemove() {
      if (this.operateBtn.groupId.length == 0) {
        this.$message.warning("分组必填");
        return;
      }
      let params = {};
      params.groupId =
        this.operateBtn.groupId[this.operateBtn.groupId.length - 1];
      this.currentModelGroupId = params.groupId;
      params.ids = this.operateBtn.selected.map((item) => item.id);
      modelMove(params).then((res) => {
        this.$message.success("移动成功");
        this.queryParams.pageNo = 1;
        this.queryParams.pageSize = 10;
        this.cancelRemove();
      });
    },
    cancelRemove() {
      this.operateBtn.removeDialog = false;
      this.operateBtn.groupId = "";
      this.operateBtn.selected = [];
      this.getList();
    },
    //批量确定删除
    submitDelete() {
      let params = this.operateBtn.selected.map((item) => item.id);
      modelDelete(params).then((res) => {
        this.$message.success("删除成功");
        this.cancelDelete();
        this.queryParams.pageNo = 1;
        this.queryParams.pageSize = 10;
        this.getList();
      });
    },
    cancelDelete() {
      this.operateBtn.deleteDialog = false;
      this.operateBtn.selected = [];
    },
    //查看该流程下的所有版本
    lookProcessDetail(row) {
      this.$router.push({
        path: "/bpm/process-instance/look",
        query: {
          modelId: row.id,
        },
      });
    },
    foldTreeEvent() {
      this.foldPanelShow = !this.foldPanelShow;
    },
    nodeClicked(data, node) {
      this.queryParams.name = "";
      this.currentModelGroupId = data.id;
      //this.getList();
      this.parentList = [];
      this.platform(node);
    },
    platform(node) {
      if (!node.parent) {
        // 若无父节点，则直接返回
        return;
      }
      this.parentList.unshift(node.data.id); // 将value保存起来
      //调用递归
      this.platform(node.parent);
    },
    //鼠标移入操作
    mouseover(data) {
      this.$set(data, "deleteShow", data.level == 0 ? false : true);
      if (data.level == 0 || data.level > 3) {
        this.$set(data, "nodeShow", false);
      } else {
        this.$set(data, "nodeShow", true);
      }
    },
    mouseout(data) {
      this.$set(data, "deleteShow", false);
      this.$set(data, "nodeShow", false);
    },
    //新建根节点流程分组
    createRootGroup() {
      this.processGroupOperate.showDialog = true;
      this.processGroupOperate.title = "新建流程分组";
      this.processGroupOperate.form = {
        parentId: 0,
      };
      this.expandedKeys = [this.treeData[0].id];
    },
    append(event, data) {
      event.stopPropagation();
      this.expandedKeys = [data.id];
      this.processGroupOperate.showDialog = true;
      this.processGroupOperate.title = "新建流程分组";
      this.processGroupOperate.form = {
        parentId: data.id,
      };
      this.processGroupOperate.form.isShow = data.id;
      this.processGroupOperate.form.parentName = data.name;
    },
    //编辑分组名称
    editGroup(event, data) {
      event.stopPropagation();
      this.expandedKeys = [data.id];
      this.processGroupOperate.showDialog = true;
      this.processGroupOperate.title = "编辑流程分组";
      this.processGroupOperate.form = {
        parentId: data.parentId,
        id: data.id,
        name: data.name,
      };
    },

    remove(event, node, data) {
      event.stopPropagation();
      let parentId = node.parent.data.id;
      this.expandedKeys = [parentId];
      deleteGroup(data.id).then((res) => {
        this.$message.success("删除成功");
        this.getTreeList();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-process-designer {
  height: calc(100vh - 200px);
}

.process-group {
  margin: 0 16px;

  .header-search {
    height: 56px;
    display: flex;
    align-items: center;

    .header-left {
      width: 20%;

      .fold-span {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 2px;
        border: 4px solid #2a67f4;
        cursor: pointer;
      }
    }

    .header-right {
      flex: 1;
      text-align: right;
    }
  }

  .main-content {
    min-height: 440px;
    display: flex;
    border: 1px solid #e8eaed;

    .left-tree {
      position: relative;
      width: 300px;
      padding: 0 8px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #e8eaed;

      .process-group-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 8px;
        position: relative;

        &:nth-child(1) {
          font-size: 16px;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 600;
          color: #23272e;
        }

        .process-sort-icon {
          font-size: 20px;
          position: absolute;
          right: 0;
          top: 9px;
        }
      }

      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;

        .el-icon-plus:before {
          color: #bfc5cd;
        }

        .el-icon-delete:before {
          color: #bfc5cd;
        }

        .el-icon-edit:before {
          color: #bfc5cd;
        }

        .mouseover-span {
          display: inline-block;
          text-align: end;
          padding-right: 12px;
          padding-left: 20px;
        }
      }

      .create-root-name {
        position: absolute;
        bottom: 15px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        width: 93%;
        background: #f6f7f8;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #e3e5e8;
        cursor: pointer;

        :nth-child(2) {
          margin-left: 8px;
          font-size: 16px;
          font-weight: 500;
        }
      }
    }

    .right-table {
      flex-grow: 1;
      width: 0;
    }
  }
}

.svg-icon-size-one {
  font-size: 16px;
}

.svg-icon-margin-one {
  margin-top: 4px;
  margin-left: 4px;
}

.svg-icon-size-two {
  font-size: 20px;
}

.svg-icon-size-three {
  font-size: 24px;
}

.svg-icon-margin {
  margin-right: 10px;
}

.batch-delete {
  margin-left: 8px;
  font-size: 16px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #23272e;
}

.batch-delete-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  span {
    margin-bottom: 10px;
  }
}

.batch-remove-content {
  display: flex;
  flex-direction: column;

  span {
    margin-bottom: 10px;
  }
}

// ::v-deep .el-tree-node:focus > .el-tree-node__content {
//   background-color: #ebf2fe;
//   color: #0047ea;
// }
</style>
